<template>
    <div class="check-wrap">
     <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 模板管理 -->
    <el-tab-pane label="模板管理" name="first">
        <div class="check-top">
        <el-input v-model="form.contentName" placeholder="模板名称"
          ><i slot="suffix" class="el-icon-search"></i>
        </el-input>
        <el-select v-model="form.auditStatus" placeholder="管理机构">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
  
        <el-date-picker
          v-if="false"
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-select v-model="form.contentType" placeholder="创建人">
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
        <el-button type="primary" size="mini"  @click="goRoute(1)">创建模板</el-button>
      </div>
      <div class="check-table">
        <el-table
        :key="activeName" 
          :data="tableData"
          v-loading="tableLoading"
          height="calc(100% - 32px)"
          :row-style="{ height: '40px' }"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="contentName"
            label="模板名称"
            align="center"
           
          ></el-table-column>
          <el-table-column
            prop="contentType"
            label="模板内容"
            align="center"
            
          >
          </el-table-column>
          <el-table-column
            prop="createBy"
            label="创建者"
            align="center"
            
          >
            <template slot-scope="scope">
              <div class="create-by">{{ scope.row.createBy }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="
            
            "
            label="创建时间"
            align="center"
          
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            min-width="140"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text"> 详情</el-button>
              <el-button type="text"> 编辑</el-button>
              <el-button type="text"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="total,sizes,prev,pager,next"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          :current-page.sync="form.pageNum"
          :page-size.sync="form.pageSize"
          class="table-page"
        >
        </el-pagination>
      </div>
    </el-tab-pane>
    <!-- 群发短信 -->
    <el-tab-pane label="群发短信" name="second">
        <div class="check-top">
        <el-input v-model="form.contentName" placeholder="群发短信名称"
          ><i slot="suffix" class="el-icon-search"></i>
        </el-input>
  
        <el-date-picker
        v-if="false"
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-select v-model="form.contentType" placeholder="管理机构">
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
        <el-select v-model="form.contentType" placeholder="创建人">
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
        <el-button type="primary" size="mini"  @click="goRoute(2)">新增群发短信</el-button>
      </div>
      <div class="check-table">
        <el-table
        :key="activeName" 
          :data="tableData"
          v-loading="tableLoading"
          height="calc(100% - 32px)"
          :row-style="{ height: '40px' }"
        >
          <el-table-column
            type="index"
            width="55"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="contentName"
            label="群发短信名称"
            align="center"
           
          ></el-table-column>
          <el-table-column
            prop="contentType"
            label="发送时间"
            align="center"
            
          >
          </el-table-column>
          <el-table-column
            prop="createBy"
            label="群发类型"
            align="center"
            
          >
        </el-table-column>
          <el-table-column
            label="发送状态"
            align="center"
            prop="status"
          >
            <template slot-scope="{ row }">
              <div>
                哈哈哈
              </div>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建人"
            align="center"
          
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            min-width="140"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text"> 发送</el-button>
              <el-button type="text"> 详情</el-button>
              <el-button type="text"> 编辑</el-button>
              <el-button type="text"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="total,sizes,prev,pager,next"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          :current-page.sync="form.pageNum"
          :page-size.sync="form.pageSize"
          class="table-page"
        >
        </el-pagination>
      </div>
    </el-tab-pane>
</el-tabs>





     
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeName:'first',

        dateRange: "",
        form: {
          contentName: "",
          auditStatus: "",
          contentType: "",
          pageNum: 1,
          pageSize: 10,
        },
        tableData: [{
          contentName:'123',
          contentType:[{userId:1,userName:'abc'},{userId:2,userName:'def'}]
        }],
        tableLoading: false,
        saveLoading: false,
        total: 0,
        statusOptions: [],
        typeOptions: [],
        checkVisible: false,
        checkForm: {
          auditStatus: "",
          auditRemark: "",
        },
        rules: {
          auditStatus: [
            { required: true, message: "请选择审核结果", trigger: "change" },
          ],
        },
      };
    },
    methods: {
      handleSizeChange(value) {
        this.form.pageNum = 1;
        this.form.pageSize = value;
        this.handleQuery();
      },
      handleCurrentChange(value) {
        this.form.pageNum = value;
        this.handleQuery();
      },
      handleClick(){

      },
       // 新增规则
       goRoute(msg) {
        if(msg===1){
            this.$router.push({
          name: "HandleMessage",
        });
        }else if(msg===2){
            this.$router.push({
          name: "SendMessage",
        });
        }
         
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .check-wrap {
    background: #fff;
    padding: 20px;
    height: 100%;
  
    .check-top {
      height: 32px;
      margin-bottom: 10px;
  
      .el-input,
      .el-date-editor {
        width: 230px;
      }
      .el-button {
        float: right;
      }
  
      div {
        margin-right: 10px;
      }
    }
  
    .check-table {
      margin-top: 20px;
      height: calc(100% - 50px);
     
      .table-page {
        text-align: right;
        height: 40px;
        margin-top: 15px;
      }
  
      .create-by {
        color: #0079de;
      }
    }
  }
  
  .el-tag.el-tag--success {
    background-color: #e6f9ef !important;
    border-color: #cdf3df !important;
    color: #06c160 !important;
  }
  
  .el-tag.el-tag--info {
    background-color: #f4f4f5 !important;
    border-color: #e9e9eb !important;
    color: #909399 !important;
  }
  
  .el-tag.el-tag--danger {
    background-color: #fdedee !important;
    border-color: #fadcde !important;
    color: #e74e59 !important;
  }

  .el-tabs {
        height: calc(100% - 50px);
        
      }
      .el-tabs__content{
            height: calc(100% - 50px);
        }
  </style>
  